<template>
  <div>
    <el-dialog title="修改角色" :visible.sync="isShow" width="800px" :close-on-click-modal="false" @close="closeUserMod"
      @open="openUpdate">
      <div v-loading="loading">
        <el-card>
          <el-form size="mini" ref="newUserDate" :model="newUserDate" :rules="rules" label-width="120px"
            label-position="left">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item prop="appId" label="应用编号:">
                  <el-input v-model="newUserDate.appId" :disabled="true" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="userNum" label="角色编号:">
                  <el-input v-model="newUserDate.userNum" :disabled="true" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item prop="RoleName" label="角色名称:">
                  <el-input v-model="newUserDate.RoleName"  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="RoleClass" label="角色分类">
                    <!-- 下拉 -->
                     <el-select v-model="newUserDate.RoleClass" filterable  placeholder="请选择角色分类"  >
                    <el-option
                    v-for="item in RoleList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value">
                    </el-option>
                  </el-select>
                  </el-form-item>
              </el-col>
            </el-row>
           <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item prop="LegalPersonNum" label="法人号:">
                  <el-input v-model="newUserDate.LegalPersonNum" :disabled="true" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="LegalPersonName" label="法人名称:">
                  <el-input v-model="newUserDate.LegalPersonName" :disabled="true" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item prop="MutualExclRole" label="互斥角色">
                    <el-select v-model="newUserDate.MutualExclRole" multiple placeholder="请选择互斥角色">
                    <el-option v-for="item in treeList" :key="item.value" :label="item.name" :value="item.id"
                      :disabled="item.disabled">
                    </el-option>
                  </el-select>
                  <!--   <el-input v-model="form.MutualExclRole" placeholder="" :disabled="true"></el-input> -->
                  </el-form-item>
                </el-col>
                <!-- <el-button type="primary" icon='el-icon-search' size="mini" @click="innerVisible = true">添加</el-button>
                <el-col :span="12" style="text-align:center;">
                  <el-form-item prop="tellerNo" >
                    <el-dialog  width="90%" title="添加互斥角色" :visible.sync="innerVisible" :center="true" append-to-body @open="diaclick" >
                      <el-checkbox-group v-model="checkList">
                       <el-checkbox v-for="date in treeList"  :label="date.id" :key="date.id"  >{{ date.name }}</el-checkbox>
                      </el-checkbox-group>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="innerVisible = false">取 消</el-button>
                      <el-button type="primary" @click="confirm">确 定</el-button>
                    </span>
                    </el-dialog>
                  </el-form-item>
                </el-col> -->
            </el-row>
            <el-row :gutter="10">
               <el-col :span="12">
                  <el-form-item prop="EffeDate" label="生效日期">
                    <!-- datePicker -->
                    <el-date-picker  v-model="newUserDate.EffeDate" :disabled="true" :editable=false value-format="yyyyMMdd" type="date" style="width:100%;"
                      placeholder="选择生效日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="ExpiDate" label="失效日期">
                    <!-- datePicker -->
                   <el-date-picker v-model="newUserDate.ExpiDate" :editable=false value-format="yyyyMMdd" type="date" style="width:100%;"
                      placeholder="选择失效日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="10">
               <el-col :span="12">
                  <el-form-item prop="SortNum" label="排序号">
                    <el-input-number v-model="newUserDate.SortNum" @change="handleChange1" :min="1" :max="100" label="排序号"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="RoleStatus" label="角色状态">
                    <!-- 下拉 -->
                    <el-select v-model="newUserDate.RoleStatus"   filterable  placeholder="请选择角色状态"  >
                    <el-option
                    v-for="item in RoleStatusList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value">
                    </el-option>
                  </el-select>
                  <!--   <el-input v-model="form.RoleStatus" placeholder=""></el-input> -->
                  </el-form-item>
                </el-col>
            </el-row>
          </el-form>
        </el-card>
        <div style="text-align:right;margin:20px 0">
          <el-button size="mini" @click="cancleUserMod">取消</el-button>
          <el-button type="primary" @click="userMod" size="mini">确认</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import tree from "@/message/userManage/role/tree";
import createUser from "@/message/userManage/user/user-create";
import branchList from "@/message/shared/branch-list";
import toolBox from "@/common/utils/toolBox";
import request from "@/common/utils/request";
import modUser from "@/message/userManage/role/role-update";
import InquireUser from "@/message/userManage/user/userinfo-load";
export default {
  name: "roleInfoManage",
  data() {
    let expiDateChek = (rule, value, callback) => { //自定义表单验证 校验IP地址
      console.log(value);
        if (value != "") {
          if (value - this.newUserDate.EffeDate >= 0) {
            callback();
          } else {
            callback(new Error("失效日期必须大于生效日期"));
          }
        } else {
          callback();
        }
      };
    return {
      innerVisible: false,
      loading: false,
      RoleList: [{ name: "01-岗位", value: "01" }],
      RoleStatusList: [
        { name: "0-停用", value: "0" },
        { name: "1-启用", value: "1" }
      ],
      checkList: [],
      treeList: [],
      appList: [],
      newUserDate: {
        //表单信息
        //表单信息
        appId: "",
        userNum: "",
        RoleName: "",
        RoleClass: "",
        LegalPersonNum: "",
        LegalPersonName: "",
        MutualExclRole: [],
        EffeDate: "",
        ExpiDate: "",
        SortNum: "1",
        RoleStatus: "",
        checked: []
      },
      rules: {
        //表单校验规则
        RoleClass: [
          {
            required: true,
            message: "请输入角色分类",
            trigger: "change"
          }
        ],
        EffeDate: [
          {
            required: true,
            message: "请选择生效日期",
            trigger: "blur"
          }
        ],
        ExpiDate: [
          {
            required: true,
            message: "请选择失效日期",
            trigger: "blur"
          },
          {
              validator: expiDateChek,
              trigger: "change"
            }
        ],
        SortNum: [
          {
            required: true,
            message: "请选择排序号",
            trigger: "blur"
          }
        ],
        RoleStatus: [
          {
            required: true,
            message: "请选择角色状态",
            trigger: "blur"
          }
        ]
      }
    };
  },
  props: {
    //父元素传递的数据
    optionUpdate: Object
  },
  computed: {
    isShow: {
      //修改用户弹窗是否显示
      get: function() {
        return this.optionUpdate.isShow;
      },
      set: function(newValue) {
        this.optionUpdate.isShow = newValue;
      }
    }
  },
  methods: {
    handleChange1(value) {
      console.log(value);
    },
    // diaclick() {
    //   this.tree();
    // },
    tree() {
      this.loading = true;
      let resBody = new tree();
      resBody.data.AppNum = this.newUserDate.appId;
      resBody.data.RoleNum = this.newUserDate.userNum;
      request(resBody)
        .then(response => {
          if (response.APP_HEAD.ReturnCode === "000000") {
            console.log(response);
            this.treeList = response.RspInfo.Result ||[];
            this.loading = false;
          } else {
             this.treeList = [];
            this.loading = false;
          }
        })
        .catch(error => {
          this.loading = false;
          // this.logger.log("fail", error);
        });
    },
    openUpdate() {
      //打开弹窗事件
      console.log(this.optionUpdate.currentRow);
      this.newUserDate.appId = this.optionUpdate.currentRow[0].appnum;
      this.newUserDate.userNum = this.optionUpdate.currentRow[0].rolenum;
      this.newUserDate.RoleName = this.optionUpdate.currentRow[0].rolename;
      this.newUserDate.RoleClass = this.optionUpdate.currentRow[0].roleclass;
      this.newUserDate.EffeDate = this.optionUpdate.currentRow[0].effedate;
      this.newUserDate.ExpiDate = this.optionUpdate.currentRow[0].expidate;
      this.newUserDate.RoleStatus = this.optionUpdate.currentRow[0].rolestatus;
      if(this.optionUpdate.currentRow[0].mutualexclrole && this.optionUpdate.currentRow[0].mutualexclrole != ""){
        this.newUserDate.MutualExclRole = this.optionUpdate.currentRow[0].mutualexclrole.split(",");
      }
      this.newUserDate.LegalPersonNum = this.$store.getters.LegalPersonNum;
      this.newUserDate.LegalPersonName = this.$store.getters.LegalPersonName;
      this.tree();
    },
    cancleUserMod() {
      //关闭弹窗事件，清楚表单验证
      this.optionUpdate.isShow = false;
      this.$refs.newUserDate.clearValidate();
    },
    closeUserMod() {
      //修改弹窗关闭
      this.$refs.newUserDate.clearValidate();
    },
    userMod() {
      //修改用户
      this.$refs["newUserDate"].validate(valid => {
        if (valid) {
          this.loading = true;
          let resBody = new modUser();
          resBody.data.AppNum = this.newUserDate.appId;
          resBody.data.RoleNum = this.newUserDate.userNum;
          resBody.data.RoleName = this.newUserDate.RoleName;
          resBody.data.RoleClass = this.newUserDate.RoleClass;
          resBody.data.LegalPersonNum = this.newUserDate.LegalPersonNum;
          resBody.data.LegalPersonName = this.newUserDate.LegalPersonName;
          resBody.data.MutualExclRole = this.newUserDate.MutualExclRole.join(",");
          resBody.data.EffeDate = this.newUserDate.EffeDate;
          resBody.data.ExpiDate = this.newUserDate.ExpiDate;
          resBody.data.SortNum = this.newUserDate.SortNum;
          resBody.data.RoleStatus = this.newUserDate.RoleStatus;
          request(resBody)
            .then(response => {
              if (response.SYS_HEAD.ReturnCode === "000000") {
                this.loading = false;
                this.$message({
                  type: "success",
                  message: "用户修改成功!"
                });
                this.optionUpdate.isShow = false;
                this.$emit("refreshTable"); //修改用户成功并刷新表格数据
              } else {
                this.loading = false;
              }
            })
            .catch(error => {
              this.loading = false;
            });
        } else {
          this.$message({
            type: "warning",
            message: "请输入合法的数据！"
          });
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
}

.require {
  color: red;
}

.dialog-text {
  display: inline-block;
  width: 100%;
  text-align: center;
  color: red;
  font-size: 18px;
}

.role {
  width: 95%;
  border: 1px solid #eee;
  border-radius: 4px;
  height: 290px;

  .roleHeader {
    color: #606266;
    font-weight: 500;
    font-size: 14px;
    background: #f5f7fa;
    height: 42px;
    box-sizing: border-box;
    padding: 9px;
    overflow-y: auto;
  }
}

.el-dialog__body {
  padding: 20px;
  padding-top: 10px;
}

.el-card {
  overflow: inherit;
}
</style>
